<!--
 * 部门管理
 * @author: hexiaozhen
 * @since: 2023-09-27
 * index.vue
-->
<template>
  <div class="main-content">
    <!-- 搜索 -->
    <TableForm
      ref="formAndTableRef"
      :formItems="formItems"
      :formData="formData"
      :girdOption="girdOption"
      class="tableForm"
      @getTableList="getTableList"
      @handleBtnClick="handleBtnClick"
    >
      <!-- 自定义操作按钮 -->
      <template #tableOptate="{ record }">
        <a-button
          type="text"
          v-for="clickItem in tableOperateList"
          :key="clickItem.text"
          class="operate-item"
          :disabled="!!(record.parentId === '0' && clickItem.eventName == 'tableDel')"
          :status="clickItem.eventName == 'tableDel' ? 'danger' : ''"
          @click="handleBtnClick(clickItem.eventName, record)"
          >{{ clickItem.text }}
        </a-button>
      </template>
      <!-- 列插槽 -->
      <template #createTime="{ record }">
        {{ record.createTime.slice(0, 10) }}
      </template>
      <template #status="{ record }">
        {{ record.status === '1' ? '停用' : '开启' }}
      </template>
      <template #deptType="{ record }">
        {{ record.deptType === '1' ? '部门' : '公司' }}
      </template>
    </TableForm>
    <AddEditDept v-if="visible" v-model:visible="visible" :rowData="rowData" @submit="getTableList()"></AddEditDept>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import AddEditDept from './components/addEditDept.vue' // 新增编辑
import system from '@/api/modules/system'
import { Modal, Message } from '@arco-design/web-vue'

const formData = reactive({ deptName: '', status: '' })
const formAndTableRef = ref()
// 获取字典数据
const statusOptions = ref([])
// 表单配置
const formItems = reactive([
  { name: 'deptName', label: '部门名称', type: 'a-input' },
  { name: 'status', label: '状态', type: 'a-select', options: statusOptions },
])
const girdOption = reactive({
  btnList: [{ name: '新增', eventName: 'add', type: 'icon-xinzeng' }],
  columns: [
    { title: '部门名称', dataIndex: 'deptName', width: 245 },
    { title: '部门全称', dataIndex: 'fullName', width: 225 },
    { title: '部门编号', dataIndex: 'deptCode', width: 96 },
    { title: '部门类型', slotName: 'deptType', width: 96 },
    { title: '排序', dataIndex: 'orderNum', width: 65 },
    { title: '状态', slotName: 'status', width: 65 },
    { title: '创建时间', slotName: 'createTime', width: 121 },
    { title: '操作', slotName: 'optional', width: 160, fixed: 'right' },
  ],
  loading: false,
  pagination: false, // 无分页
  tableSlotList: ['createTime', 'status', 'deptType'], //表格插槽
  tableId: 'deptId', //表格唯一标识符类似于id
})

// 表格操作插槽
const tableOperateList = reactive([
  { text: '修改', eventName: 'tableEdit' },
  { text: '新增', eventName: 'tableAdd' },
  { text: '删除', eventName: 'tableDel' },
])
let visible = ref(false) // 新增编辑弹窗
let rowData = reactive({ type: 'add' }) // 弹窗数据

const handleBtnClick = (type, row) => {
  switch (type) {
    case 'add': {
      // 新增
      rowData = { type: 'add' }
      visible.value = true
      break
    }
    case 'tableEdit': {
      //编辑
      visible.value = true
      rowData = { ...row, type: 'edit' }
      break
    }
    case 'tableAdd': {
      // 新增
      rowData = { ...row, type: 'add' }
      visible.value = true
      break
    }
    case 'tableDel': {
      //删除
      Modal.open({
        title: '警告',
        content: `是否确认删除部门名称为${row.deptName}的数据项？`,
        draggable: true,
        onOk: () => {
          delDept(row.deptId)
        },
      })
      break
    }
  }
}
const delDept = (id) => {
  system.delDept(id).then((res) => {
    getTableList()
    Message.success(res.msg)
  })
}
// 数据字典
const getOption = () => {
  const param = { dictTypes: 'sys_normal_disable' }
  system.getDicts(param).then((res) => {
    statusOptions.value = res.data.sys_normal_disable.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
  })
}
// 获取表格数据
const getTableList = () => {
  girdOption.loading = true
  system
    .getDeptList({ ...formData })
    .then((res) => {
      formAndTableRef.value.setTableData(res.data)
      girdOption.loading = false
    })
    .catch(() => {
      girdOption.loading = false
    })
}

onMounted(() => {
  getOption()
  getTableList()
})
</script>
